<template>
  <div class="container">
    <div class="showCont" v-if="!showTimeOut && showCont">
      <div class="detailMain">
        <div class="stepTitle">
          <div class="stepName">
            {{ detailInfo.project_name }}
          </div>
          <div class="moneyNum">
            ¥{{ $converData.setMoney(detailInfo.project_budget) }}
          </div>
        </div>
        <div class="itemForm">
          <div class="statusImg">
            <img
              v-if="detailInfo.examine_status == 2"
              src="/img/statusBid.png"
            />
            <img
              v-if="detailInfo.examine_status == 4"
              src="/img/statusSpeed.png"
            />
            <img
              v-if="detailInfo.examine_status == 5"
              src="/img/statusOver.png"
            />
            <img
              v-if="detailInfo.examine_status == 6"
              src="/img/statusEnd.png"
            />
          </div>
          <div class="formItem">
            <div class="itemName">经验要求</div>
            <div class="itemVal">{{ detailInfo.jdjy }}年以上</div>
          </div>
          <div class="formItem">
            <div class="itemName">周期要求</div>
            <div class="itemVal">{{ detailInfo.project_cycle }}个月</div>
          </div>
          <div class="formItem">
            <div class="itemName">办公要求</div>
            <div class="itemVal">{{ detailInfo.bgyq }}(北京市)</div>
          </div>
          <div class="formItem">
            <div class="itemName">接单群体</div>
            <div class="itemVal">{{ detailInfo.jdqt }}</div>
          </div>
          <div class="formItem">
            <div class="itemName">截止日期</div>
            <div class="itemVal">{{ detailInfo.end_time }}</div>
          </div>
        </div>
        <div class="stepTitle hasTop flexCont">
          <div class="stepName">需求说明</div>
          <div
            v-if="detailInfo.is_collect == 2"
            class="goodsBtn isCollect"
            @click="saveCheck"
          >
            <span class="iconfont icon-shoucang1"></span>
            <span>已收藏</span>
          </div>
          <div
            v-if="detailInfo.is_collect == 1"
            class="goodsBtn"
            @click="saveCheck"
          >
            <span class="iconfont icon-shoucang1"></span>
            <span>收藏</span>
          </div>
        </div>
        <div class="formMain">
          <div class="orderNum">
            项目编号【{{ detailInfo.project_demand_number }}】
          </div>
          <div class="orderInfo" style="white-space: pre-wrap">
            {{ $converData.changeLine(detailInfo.project_describe) }}
          </div>
        </div>
        <div class="stepTitle hasTop" v-if="detailInfo.bid_record.length > 0">
          <div class="stepName">
            竞标开发者({{ detailInfo.bid_record.length }}人)
          </div>
        </div>
        <div class="orderMain">
          <div
            @click="detaiFn(item)"
            :class="index == 0 ? 'orderItem noTop' : 'orderItem'"
            :key="index"
            v-for="(item, index) in detailInfo.bid_record"
          >
            <div class="typeTagWai" v-if="item.is_bidder == 2">
              <div class="typeTag">已中标</div>
            </div>
            <div class="itemHead">
              <div class="userImg">
                <img :src="item.head_img" />
              </div>
              <div class="userNameCont">
                <div class="headName">
                  <div class="orderNum">{{ item.career_path }}</div>
                  <div class="orderTag">{{ item.work_experience }}</div>
                </div>
                <div class="userInfo">
                  {{ item.work_address }}
                </div>
              </div>
            </div>
            <div class="orderForm">
              <div class="formItem">
                时间：
                <span :key="b" v-for="(a, b) in item.work_time">
                  <span v-if="b > 0">，</span>
                  {{
                    a.name + "(" + a.start_time + "~" + a.end_time + ")"
                  }}</span
                >
              </div>
              <div class="formItem">
                技能：<span :key="b" v-for="(a, b) in item.skill">
                  <span v-if="b > 0">、</span>
                  {{ a.name }}</span
                >
              </div>
              <div class="formItem">
                作品：<span :key="b" v-for="(a, b) in item.works_case">
                  <span v-if="b > 0">，</span>
                  {{ a.works_name }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div class="notice">
          <div class="tipHead">
            <div class="iconfont icon-sousuo"></div>
            <div>温馨提示</div>
          </div>
          <div class="tipCont">
            请<span class="blueText">认真了解需求</span
            >，确保能胜任需求项目，再点击<span class="blueText">申请接单</span
            >。
          </div>
          <div class="tipCont">
            中标后请<span class="blueText">认真完成</span
            >需求项目，否则会直接影响个人信誉。
          </div>
          <div class="tipCont">
            在沟通过程中，发现需求方有不当行为，请<span class="blueText"
              >联系客服</span
            >处理。
          </div>
        </div>
        <div class="vipCar">
          <div class="vipHead">
            <img src="/img/vip.png" />
            <div>开发者会员</div>
          </div>
          <div class="vipMain">
            <div>1. 系统优先派单</div>
            <div>2. 程序员列表置顶</div>
            <div>3. 接单不上限</div>
            <div>4. ......</div>
          </div>
          <div class="vipCtrl">
            <div class="vipCtrlLeft">更多开发者会员权益</div>
            <div class="vipCarBtn" @click="openVip">查看详情</div>
          </div>
        </div>
      </div>
      <div class="ctrlBtn">
        <div
          class="homeBtn iconfont icon-fanhui1"
          v-if="detailInfo.is_bidder == 1 && detailInfo.examine_status == 2"
          @click="backFn"
        ></div>
        <div
          class="subBtn"
          v-if="detailInfo.is_bidder == 1 && detailInfo.examine_status == 2"
          @click="subFn"
        >
          投递简历，申请接单
        </div>
        <div
          class="subBtn"
          v-if="detailInfo.is_bidder != 1 || detailInfo.examine_status != 2"
          @click="backFn"
        >
          返回
        </div>
      </div>
    </div>
    <subLoad v-if="showSub"></subLoad>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>
<script>
import { details, deliver, collect, canceCollect } from "@/http/api";
import {
  showSuccessToast,
  showToast,
  showConfirmDialog,
  showDialog,
} from "vant";
import subLoad from "@/components/public/subLoad.vue";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
export default {
  components: { subLoad, load, getTimeOut },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showSub: false,
      detailInfo: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    detaiFn(item) {
      this.$router.push({ path: "/userCenter", query: { id: item.user_id } });
    },
    backFn() {
      this.$router.back();
    },
    openVip() {
      this.$router.push({ path: "/money" });
    },
    subFn() {
      showConfirmDialog({
        title: "接单提醒",
        message:
          "确认申请接单编号【" +
          this.detailInfo.project_demand_number +
          "】项目《" +
          this.detailInfo.project_name +
          "》？接单前请认真阅读项目需求及开发周期要求。",
      }).then(() => {
        this.showSub = true;
        let data = {
          project_demand_id: this.$route.query.id,
        };
        deliver(data)
          .then((res) => {
            if (res.data.code == 1) {
              this.getData();
              showDialog({
                title: "申请接单成功",
                message:
                  "编号【" +
                  this.detailInfo.project_demand_number +
                  "】项目《" +
                  this.detailInfo.project_name +
                  "》申请接单成功，等待雇主选标，中标后即可查看联系雇主或雇主联系你。",
              }).then(() => {
                // on close
              });
            } else {
              if (res.data.msg == "投递失败，请先开通会员") {
                showConfirmDialog({
                  title: "接单申请失败",
                  confirmButtonText: "去开通",
                  message:
                    "仅开发者会员可申请接单外包项目，请先开通“开发者会员”再发起接单，每天可免费申请5次外包接单。",
                })
                  .then(() => {
                    this.openVip();
                  })
                  .catch(() => {});
              } else if (res.data.msg == "请先完善简历") {
                showConfirmDialog({
                  title: "接单申请失败",
                  confirmButtonText: "去完善",
                  message: "你还没有完善简历，无法申请接单。",
                })
                  .then(() => {
                    this.$router.push({ path: "/book" });
                  })
                  .catch(() => {});
              } else if (res.data.msg == "简历状态有误，请检查后再试") {
                showDialog({
                  title: "接单申请失败",
                  message: "简历状态有误，请检查简历正常后再试",
                }).then(() => {});
              } else if (res.data.msg == "你的账号已被禁用") {
                showDialog({
                  title: "操作失败提示",
                  message: "你的账号已被禁用，无法申请接单。",
                }).then(() => {});
              } else {
                showToast(res.data.msg);
              }
            }
            this.showSub = false;
          })
          .catch(() => {
            this.showSub = false;
          });
      });
    },
    getData() {
      let data = {
        project_demand_id: this.$route.query.id,
      };
      details(data)
        .then((res) => {
          if (res.data.code == 1) {
            this.detailInfo = res.data.data;
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    saveCheck() {
      if (this.detailInfo.is_collect == 1) {
        this.saveFn();
      } else {
        this.cancelSave();
      }
    },
    saveFn() {
      let data = {
        project_demand_id: this.$route.query.id,
      };
      collect(data)
        .then((res) => {
          if (res.data.code == 1) {
            showSuccessToast("收藏成功");
            this.getData();
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    cancelSave() {
      let data = {
        project_demand_id: this.$route.query.id,
      };
      canceCollect(data)
        .then((res) => {
          if (res.data.code == 1) {
            showSuccessToast("取消收藏");
            this.getData();
          } else {
            showToast(res.data.msg);
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
  },
  mounted() {},
  created() {
    this.getData();
    // this.showCont = false;
  },
};
</script>

<style scoped lang="less">
.container {
  // padding-bottom: 1.25rem;
  box-sizing: border-box;
  box-sizing: border-box;
  min-height: 100vh;
  .showCont {
    padding: 1rem 0 4rem;
    box-sizing: border-box;
    .detailMain {
      background-color: #fff;
      border-radius: 0.25rem;
      padding: 0.75rem 4%;
      box-sizing: border-box;
    }
  }
  .stepTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .stepName {
      font-size: 0.8rem;
      font-weight: bold;
      margin-right: 0.75rem;
      width: 1rem;
      flex: 1;
    }
    .moneyNum {
      color: #86a9fb;
      font-size: 0.8rem;
    }
    .goodsBtn {
      padding: 0.25rem 1rem;
      border-radius: 1rem;
      display: flex;
      align-items: center;
      border: 1px solid #86a9fb;
      color: #86a9fb;
      font-size: 0.6rem;
      background-color: #fff;
      .iconfont {
        font-size: 1rem;
        margin-right: 0.25rem;
      }
    }
    .isCollect {
      background-color: #86a9fb;
      color: white;
    }
  }

  .orderMain {
    width: 100%;
    margin-top: 0.5rem;
    max-height: 500px;
    overflow: auto;
    scrollbar-width: none;
    .orderItem {
      //   background-color: #f1f4fb;
      padding: 0.75rem;
      // border-top: 1px dashed #ccc;
      border: 1px solid #86a9fb;
      border-radius: 0.25rem;
      margin: 0 0 0.75rem;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      .typeTagWai {
        font-size: 0.6rem;
        height: 1.1rem;
        line-height: 1.3rem;
        position: absolute;
        top: 0.5rem;
        right: -1.6rem;
        background-color: #85ce61;
        width: 5rem;
        text-align: center;
        transform: rotate(45deg);
        color: white;
        .typeTag {
          transform: scale(0.8);
        }
      }
      .itemHead {
        // padding: 0rem 0 0.75rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .userImg {
          width: 2rem;
          height: 2rem;
          background-color: #86a9fb;
          padding: 0.1rem;
          box-sizing: border-box;
          overflow: hidden;
          font-size: 0;
          border-radius: 50%;
          img {
            border-radius: 50%;
            width: 100%;
          }
        }
        .userNameCont {
          flex: 1;
          width: 1rem;
          margin: 0 0.5rem;
          .headName {
            display: flex;
            align-items: center;
            .orderNum {
              font-weight: bold;
              font-size: 0.7rem;
            }
            .orderTag {
              padding: 0.1rem 0.5rem;
              box-sizing: border-box;
              background-color: #86a9fb;
              color: #fff;
              border-radius: 0.1rem;
              font-size: 0.6rem;
              margin-left: 0.25rem;
              transform: scale(0.9);
            }
          }
          .userInfo {
            font-size: 0.6rem;
            color: #999;
            margin-top: 0.15rem;
          }
        }
      }
      .orderForm {
        margin-top: 0.5rem;
        .formItem {
          font-size: 0.6rem;
          margin-bottom: 0.25rem;
          color: #333;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
    }
  }

  .orderMain::-webkit-scrollbar {
    display: none;
    /* 针对WebKit浏览器，隐藏滚动条 */
  }

  .orderMain {
    -ms-overflow-style: none;
    /* 针对IE和Edge，隐藏滚动条 */
  }

  .hasTop {
    margin-top: 1rem;
  }
  .flexCont {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .formMain {
    margin-top: 0.5rem;
    color: #666;

    .orderInfo {
      margin-top: 0.75rem;
    }
  }

  .userCont {
    box-sizing: border-box;
    margin-top: 1rem;
    background-image: linear-gradient(to right bottom, #cbd8f7, #86a9fb);
    color: #fff;
    border-radius: 0.25rem;
    padding: 0.75rem 4%;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .userImg {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background-color: #fff;
      padding: 0.1rem;
      box-sizing: border-box;
      overflow: hidden;
      font-size: 0;
      img {
        width: 100%;
        border-radius: 50%;
      }
    }

    .detailInfo {
      flex: 1;
      width: 1rem;
      margin-left: 0.75rem;

      .userName {
        font-weight: bold;
        font-size: 0.7rem;
        display: flex;
      }

      .compName {
        font-size: 0.6rem;
        margin-top: 0.25rem;
        color: #fff;
        display: flex;
        align-items: center;
        .relTag {
          padding: 0.1rem 0.75rem;
          background-color: #fff;
          color: #86a9fb;
          font-size: 0.6rem;
          font-weight: normal;
          border-radius: 0.1rem;
          transform: scale(0.8);
        }
      }
    }
  }

  .notice {
    margin-top: 0.75rem;

    .tipHead {
      width: 100%;
      padding: 0.5rem 0;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .iconfont {
        margin-right: 0.5rem;
      }
    }

    .tipCont {
      font-size: 0.6rem;
      color: #666;

      .blueText {
        color: #86a9fb;
      }
    }
  }

  .vipCar {
    width: 100%;
    border: 1px solid #efdaa7;
    border-radius: 0.25rem;
    overflow: hidden;
    margin-top: 1rem;
    height: 10rem;
    background-size: cover;
    background-image: url(/img/vipCar.png);
    padding: 0.75rem;
    box-sizing: border-box;
    .vipHead {
      display: flex;
      align-items: center;
      font-size: 0.8rem;
      font-weight: bold;
      color: #dca014;

      img {
        height: 1.1rem;
        margin-right: 0.5rem;
      }
    }

    .vipMain {
      margin-top: 0.75rem;
      color: #333;

      div {
        margin-bottom: 0.25rem;
      }
    }

    .vipCtrl {
      display: flex;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      color: #333;

      .vipCarBtn {
        padding: 0.35rem 1.25rem;
        color: #dca014;
        border: 1px solid #dca014;
        font-size: 0.6rem;
        border-radius: 0.25rem;
      }
    }
  }
  .ctrlBtn {
    width: 100%;
    position: fixed;
    left: 0%;
    bottom: 0rem;
    display: flex;
    align-items: center;
    padding: 0.5rem 4%;
    box-sizing: border-box;
    background: #fff;
    .homeBtn {
      width: 2.2rem;
      margin-right: 0.75rem;
      height: 2.2rem;
      line-height: 2.2rem;
      border-radius: 0.25rem;
      background-color: #86a9fb;
      color: white;
      text-align: center;
      font-size: 1rem;
    }
    .subBtn {
      flex: 1;
      line-height: 2.2rem;
      background-color: #86a9fb;
      color: #fff;
      border-radius: 0.25rem;
      text-align: center;
    }
    .saveIcon {
      margin-right: 0.75rem;
      font-size: 1.2rem;
      color: #999;
      // background-color: #86a9fb;
      border: 1px solid #86a9fb;
      line-height: 2.2rem;
      padding: 0 0.6rem;
      border-radius: 0.25rem;
      color: #86a9fb;
      background-color: #fff;
    }
    .isSave {
      background-color: #86a9fb;
      color: #fff;
    }
  }

  .itemForm {
    background-color: #f1f5ff;
    padding: 0.75rem;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 0.75rem;
    border-radius: 0.25rem;
    position: relative;

    .statusImg {
      width: 4.5rem;
      position: absolute;
      right: 0;
      top: 0rem;

      img {
        width: 100%;
        transform: rotate(50deg);
      }
    }

    .formItem {
      display: flex;
      line-height: 1rem;
      margin-bottom: 0.25rem;

      .itemName {
        margin-right: 0.75rem;
        width: 3rem;
        color: #666;
      }

      .itemVal {
        flex: 1;
        width: 1rem;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        /* 超出几行省略 */
      }
    }
  }

  .filterMain {
    width: 100%;
    padding: 1.25rem 4%;
    box-sizing: border-box;
    text-align: center;

    .filterName {
      font-size: 1rem;
      font-weight: bold;
    }

    .filterVal {
      margin: 0.75rem 0;

      div {
        margin-bottom: 0.25rem;
      }

      .redText {
        color: #86a9fb;
      }
    }

    .maskBtn {
      width: 100%;
      background-color: #86a9fb;
      color: #fff;
      text-align: center;
      padding: 0.55rem 0;
      margin-top: 1.25rem;
      border-radius: 1.5rem;
    }
  }
}
</style>
